{% extends "admin/base_site.html" %}
{% load i18n admin_urls static %}

{% block extrastyle %}
  {{ block.super }}
  <style type="text/css">
    .form-row {
      margin-bottom: 15px;
    }
    .help-text {
      color: #666;
      font-size: 0.9em;
      margin-top: 5px;
    }
    .report-section {
      margin-top: 20px;
      padding: 15px;
      background-color: #f5f5f5;
      border-radius: 4px;
    }
    .report-summary {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      margin-top: 15px;
    }
    .summary-card {
      flex: 1;
      min-width: 250px;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
      background-color: white;
    }
    .summary-card img {
      max-width: 100%;
      height: auto;
    }
    .report-charts {
      margin-top: 30px;
    }
    .chart-section {
      margin-bottom: 30px;
      background-color: white;
      padding: 15px;
      border-radius: 4px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .chart-section h3 {
      margin-top: 0;
      padding-bottom: 10px;
      border-bottom: 1px solid #eee;
    }
    .chart-full {
      width: 100%;
      max-width: 1000px;
      margin: 0 auto;
    }
    .chart-full img {
      width: 100%;
      height: auto;
    }
    .data-section {
      margin-top: 30px;
      background-color: white;
      padding: 15px;
      border-radius: 4px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .table {
      width: 100%;
      border-collapse: collapse;
    }
    .table th, .table td {
      padding: 8px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }
    .table th {
      background-color: #f2f2f2;
    }
    .table-striped tbody tr:nth-of-type(odd) {
      background-color: #f9f9f9;
    }
    .export-options {
      margin-top: 20px;
    }
    .button-group {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 10px;
    }
    .error-message {
      color: #c00;
      font-weight: bold;
    }
    .log-summary {
      background-color: #f8f9fa;
      padding: 15px;
      border-radius: 4px;
      white-space: pre-wrap;
      font-family: monospace;
      margin-top: 20px;
    }
    .report-tabs {
      margin-top: 20px;
    }
    .report-tabs .tab {
      display: inline-block;
      padding: 10px 15px;
      cursor: pointer;
      border: 1px solid #ddd;
      border-bottom: none;
      border-radius: 4px 4px 0 0;
      background-color: #f2f2f2;
      margin-right: 5px;
    }
    .report-tabs .tab.active {
      background-color: white;
      border-bottom: 1px solid white;
      margin-bottom: -1px;
      position: relative;
      z-index: 1;
    }
    .tab-content {
      border: 1px solid #ddd;
      padding: 15px;
      border-radius: 0 4px 4px 4px;
      background-color: white;
      position: relative;
      z-index: 0;
    }
    .tab-pane {
      display: none;
    }
    .tab-pane.active {
      display: block;
    }
    .stats-box {
      background-color: #fff;
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 15px;
      margin-bottom: 20px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .stats-item {
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid #eee;
    }
    .stats-item:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }
    .stats-label {
      font-weight: bold;
      display: inline-block;
      min-width: 120px;
    }
    .stats-value {
      color: #444;
    }
  </style>
{% endblock %}

{% block breadcrumbs %}
<div class="breadcrumbs">
  <a href="{% url 'admin:index' %}">首页</a> &rsaquo;
  <a href="{% url 'admin:app_list' app_label=opts.app_label %}">{{ opts.app_config.verbose_name }}</a> &rsaquo;
  <a href="{% url 'admin:index' %}">{{ opts.verbose_name_plural|capfirst }}</a> &rsaquo;
  产品关键词分析
</div>
{% endblock %}

{% block content %}
<div id="content-main">
  <h1>产品关键词分析</h1>
  
  <div class="module">
    <form method="post">
      {% csrf_token %}
      <div class="form-row">
        <label for="id_keyword">{{ form.keyword.label }}:</label>
        {{ form.keyword }}
        <div class="help-text">{{ form.keyword.help_text }}</div>
      </div>
      
      <div class="form-row">
        <label for="id_days">{{ form.days.label }}:</label>
        {{ form.days }}
        <div class="help-text">{{ form.days.help_text }}</div>
      </div>
      
      <div class="form-row">
        <label for="id_limit">{{ form.limit.label }}:</label>
        {{ form.limit }}
        <div class="help-text">{{ form.limit.help_text }}</div>
      </div>
      
      <div class="form-row">
        <label for="id_export_format">{{ form.export_format.label }}:</label>
        {{ form.export_format }}
        <div class="help-text">{{ form.export_format.help_text }}</div>
      </div>
      
      <div class="submit-row">
        <input type="submit" value="生成分析报告" class="default">
      </div>
    </form>
  </div>
  
  {% if has_report %}
  <div class="report-section">
    <h2>"{{ keyword }}"产品分析报告</h2>
    <p>报告生成时间: {{ report_date }}</p>
    
    <!-- 数据摘要卡片 -->
    <div class="stats-box">
      <h3>分析摘要</h3>
      {% if log_summary %}
        {% for line in log_summary.splitlines %}
          <div class="stats-item">
            {% if "平均价格:" in line %}
              <span class="stats-label">平均价格:</span>
              <span class="stats-value">{{ line|slice:"5:" }}</span>
            {% elif "价格中位数:" in line %}
              <span class="stats-label">价格中位数:</span>
              <span class="stats-value">{{ line|slice:"6:" }}</span>
            {% elif "平均评分:" in line %}
              <span class="stats-label">平均评分:</span>
              <span class="stats-value">{{ line|slice:"5:" }}</span>
            {% elif "平均评论数:" in line %}
              <span class="stats-label">平均评论数:</span>
              <span class="stats-value">{{ line|slice:"6:" }}</span>
            {% elif "平均情感得分:" in line %}
              <span class="stats-label">情感分析:</span>
              <span class="stats-value">{{ line|slice:"7:" }}</span>
            {% else %}
              {{ line }}
            {% endif %}
          </div>
        {% endfor %}
      {% else %}
        <p>无统计数据</p>
      {% endif %}
    </div>
    
    <div class="report-summary">
      {% if price_chart %}
      <div class="summary-card">
        <h3>价格分析</h3>
        <img src="{{ price_chart.url }}" alt="价格分布图">
      </div>
      {% endif %}
      
      {% if rating_chart %}
      <div class="summary-card">
        <h3>评分分析</h3>
        <img src="{{ rating_chart.url }}" alt="评分分布图">
      </div>
      {% endif %}
      
      {% if wordcloud %}
      <div class="summary-card">
        <h3>关键词分析</h3>
        <img src="{{ wordcloud.url }}" alt="关键词云">
      </div>
      {% endif %}
    </div>
    
    <!-- 带标签页的完整报告 -->
    <div class="report-tabs">
      <div class="tab active" data-tab="price">价格分析</div>
      <div class="tab" data-tab="rating">评分分析</div>
      <div class="tab" data-tab="keywords">关键词分析</div>
      <div class="tab" data-tab="sentiment">情感分析</div>
      <div class="tab" data-tab="data">数据表</div>
    </div>
    
    <div class="tab-content">
      <!-- 添加调试信息 -->
      <div style="background-color: #f0f0f0; padding: 15px; margin-top: 20px; border-radius: 4px;">
        <h4>调试信息</h4>
        <p>报告目录: {{ report_dir }}</p>
        <p>媒体URL: {{ settings.MEDIA_URL }}</p>
        <p>媒体路径: D:/gitee/w1/walmartca/app/media/reports</p>
        <p>当前文件:</p>
        <ul>
          {% for file in chart_files %}
            <li>{{ file.name }} - <a href="{{ file.url }}" target="_blank">{{ file.url }}</a></li>
          {% endfor %}
        </ul>
      </div>
      
      <!-- 价格分析标签页 -->
      <div class="tab-pane active" id="price-tab">
        {% if price_chart %}
        <div class="chart-section">
          <h3>价格分布图</h3>
          <div class="chart-full">
            <img src="{{ price_chart.url }}" alt="价格分布图" style="max-width: 100%; height: auto;">
            <p><small>图片URL: {{ price_chart.url }}</small></p>
          </div>
        </div>
        {% else %}
        <div class="chart-section">
          <h3>价格分布图</h3>
          <p class="error-message">未找到价格分布图</p>
        </div>
        {% endif %}
        
        {% if price_ranges_chart %}
        <div class="chart-section">
          <h3>价格区间分布</h3>
          <div class="chart-full">
            <img src="{{ price_ranges_chart.url }}" alt="价格区间分布" style="max-width: 100%; height: auto;">
            <p><small>图片URL: {{ price_ranges_chart.url }}</small></p>
          </div>
        </div>
        {% else %}
        <div class="chart-section">
          <h3>价格区间分布</h3>
          <p class="error-message">未找到价格区间分布图</p>
        </div>
        {% endif %}
      </div>
      
      <!-- 评分分析标签页 -->
      <div class="tab-pane" id="rating-tab">
        {% if rating_chart %}
        <div class="chart-section">
          <h3>评分分布图</h3>
          <div class="chart-full">
            <img src="{{ rating_chart.url }}" alt="评分分布图">
          </div>
        </div>
        {% endif %}
        
        {% if rating_price_chart %}
        <div class="chart-section">
          <h3>评分与价格关系</h3>
          <div class="chart-full">
            <img src="{{ rating_price_chart.url }}" alt="评分与价格关系">
          </div>
        </div>
        {% endif %}
      </div>
      
      <!-- 关键词分析标签页 -->
      <div class="tab-pane" id="keywords-tab">
        {% if wordcloud %}
        <div class="chart-section">
          <h3>标题关键词云</h3>
          <div class="chart-full">
            <img src="{{ wordcloud.url }}" alt="标题关键词云" style="max-width: 100%; height: auto;">
            <p><small>图片URL: {{ wordcloud.url }}</small></p>
          </div>
        </div>
        {% else %}
        <div class="chart-section">
          <h3>标题关键词云</h3>
          <p class="error-message">未找到关键词云图</p>
        </div>
        {% endif %}
        
        {% if top_keywords_chart %}
        <div class="chart-section">
          <h3>热门关键词统计</h3>
          <div class="chart-full">
            <img src="{{ top_keywords_chart.url }}" alt="热门关键词统计" style="max-width: 100%; height: auto;">
            <p><small>图片URL: {{ top_keywords_chart.url }}</small></p>
          </div>
        </div>
        {% else %}
        <div class="chart-section">
          <h3>热门关键词统计</h3>
          <p class="error-message">未找到热门关键词统计图</p>
        </div>
        {% endif %}
      </div>
      
      <!-- 情感分析标签页 -->
      <div class="tab-pane" id="sentiment-tab">
        {% if sentiment_chart %}
        <div class="chart-section">
          <h3>情感分析结果</h3>
          <div class="chart-full">
            <img src="{{ sentiment_chart.url }}" alt="情感分析结果">
          </div>
        </div>
        {% endif %}
      </div>
      
      <!-- 数据表标签页 -->
      <div class="tab-pane" id="data-tab">
        <div class="data-section">
          <h3>数据分析表</h3>
          {% if data_summary %}
            {{ data_summary|safe }}
          {% else %}
            <p>暂无详细数据表可显示</p>
          {% endif %}
        </div>
        
        {% if log_summary %}
        <div class="data-section">
          <h3>分析日志</h3>
          <div class="log-summary">{{ log_summary }}</div>
        </div>
        {% endif %}
      </div>
    </div>
    
    <div class="export-options">
      <h3>导出报告</h3>
      <div class="button-group">
        {% for format in download_formats %}
        <a href="{{ format.url }}" class="button" target="_blank">
          下载{{ format.name }}
        </a>
        {% endfor %}
      </div>
    </div>
  </div>
  
  <!-- 标签页切换脚本 -->
  <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
      var tabs = document.querySelectorAll('.tab');
      
      tabs.forEach(function(tab) {
        tab.addEventListener('click', function() {
          // 移除所有标签和内容的活动状态
          document.querySelectorAll('.tab').forEach(function(t) {
            t.classList.remove('active');
          });
          
          document.querySelectorAll('.tab-pane').forEach(function(p) {
            p.classList.remove('active');
          });
          
          // 添加当前标签和内容的活动状态
          this.classList.add('active');
          var tabName = this.getAttribute('data-tab');
          document.getElementById(tabName + '-tab').classList.add('active');
        });
      });
    });
  </script>
  {% endif %}
</div>
{% endblock %} 